<template>
    <div>
        <!-- <el-tabs> -->
            <!-- <el-tab-pane label="新增"> -->
                <el-form class="form-box" label-position="left">
                    <el-row :gutter="20">
                        <el-col :xs="24" :sm="24" :lg="24" class="col-box">
                            <span class="col-span">项目需求：</span>
                            <el-select v-model="addProject" style="width:80%" filterable placeholder="请选择" :popper-append-to-body="false">
                                <!-- <el-option
                                v-for="(v,i) in project_list"
                                :key="i"
                                :label="v.project_workflow.project_name + '（' + (v.technical_field ? v.technical_field.name : '') + '）'"
                                :value="v.id">
                                </el-option> -->
                                 <el-option-group
                                    v-for="group in project_list"
                                    :key="group.label"
                                    :label="group.label">
                                    <el-option
                                        v-for="(item,ind) in group.options"
                                        :key="ind"
                                        :label="item.project_workflow.project_name + '（' + (item.technical_field ? item.technical_field.name : '') + '）'"
                                        :value="item.id">
                                    </el-option>
                                </el-option-group>
                            </el-select>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :xs="24" :sm="24" :lg="24" class="col-box">
                            <span class="col-span">分配工时：</span>
                            <el-input v-model="addSpend" autocomplete="off" 
                            oninput="value=value.replace(/^0[0-9]|^[2-9]|^1[0-9]|^1\.|[^\d.]/g,'').replace(/^(\-)*(\d+)\.(\d).*$/, '$1$2.$3')"
                            placeholder="输入小于等于1的非负数且为一位小数"></el-input>
                        </el-col>
                    </el-row>
                </el-form>
                <div class="form-btn">
                    <el-button type="primary" :loading="loadingBtn" @click="submitManPower">保存</el-button>
                </div>
            <!-- </el-tab-pane> -->
            <!-- <el-tab-pane label="变更">
                <el-form class="form-box" label-position="left">
                    <el-row :gutter="20">
                        <el-col :xs="24" :sm="24" :lg="24" class="col-box">
                            <span class="col-span">项目需求：</span>
                            <el-select v-model="editProject" style="width:80%" filterable placeholder="请选择">
                                <el-option
                                v-for="(v,i) in project_list1"
                                :key="i"
                                :label="v.project_workflow.project_name + '（' + (v.technical_field ? v.technical_field.name : '') + '）'"
                                :value="v.id">
                                </el-option>
                            </el-select>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :xs="24" :sm="24" :lg="24" class="col-box">
                            <span class="col-span">分配工时：</span>
                            <el-input v-model="editSpend" autocomplete="off" 
                            oninput="value=value.replace(/^0[0-9]|^[2-9]|^1[0-9]|^1\.|[^\d.]/g,'')"
                            placeholder="输入小于等于1的非负数"></el-input>
                        </el-col>
                    </el-row>
                </el-form>
                <div class="form-btn">
                    <el-button type="primary" :loading="loadingBtn" @click="submitManPower1">保存</el-button>
                </div>
            </el-tab-pane>
            <el-tab-pane label="事项">
                <el-form class="form-box" label-position="left">
                    <el-row :gutter="20">
                        <el-col :xs="24" :sm="24" :lg="24" class="col-box">
                            <span class="col-span">事项：</span>
                            <el-select v-model="memStatus" style="width:80%" filterable placeholder="请选择">
                                <el-option
                                v-for="(v,i) in status_list"
                                :key="i"
                                :label="v.label"
                                :value="v.value">
                                </el-option>
                            </el-select>
                        </el-col>
                    </el-row>
                </el-form>
                <div class="form-btn">
                    <el-button type="primary" :loading="loadingBtn" @click="submitStatus">保存</el-button>
                </div>
            </el-tab-pane> -->
        <!-- </el-tabs> -->
        <!-- <el-form class="form-box" label-position="left">
            <el-row :gutter="20">
                <el-col :xs="24" :sm="24" :lg="24" class="col-box">
                    <span class="col-span">项目需求：</span>
                    <el-select v-model="addProject" style="width:80%" placeholder="请选择">
                        <el-option
                        v-for="(v,i) in project_list"
                        :key="i"
                        :label="v.project_workflow.project_name + '（' + (v.technical_field ? v.technical_field.name : '') + '）'"
                        :value="v.id">
                        </el-option>
                    </el-select>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :xs="24" :sm="24" :lg="24" class="col-box">
                    <span class="col-span">分配工时：</span>
                    <el-input v-model="addSpend" autocomplete="off" 
                    oninput="value=value.replace(/^0[0-9]|^[2-9]|^1[0-9]|^1\.|[^\d.]/g,'')"
                    placeholder="输入小于等于1的非负数"></el-input>
                </el-col>
            </el-row>
        </el-form>
        <div class="form-btn">
            <el-button type="primary" @click="submitManPower">保存</el-button>
        </div> -->
    </div>
</template>

<script>
import { getHeaderName } from '@/app.config'
export default {
    name: 'Talent',
    props: {
        employee_id: '',
        weekCol: Array,
        loadingBtn: Boolean
    },
    data() {
        return {
            addProject: '',
            addSpend: '',
            editProject: '',
            editSpend: '',
            memStatus: '',
            itemData: {},
            project_list: [
                {
                label: '已分配项目',
                options: []
                }, {
                label: '未分配项目',
                options: []
                }
            ],
            // project_list1: [],
            // status_list: []
        }
    },
    mounted() {
        this.initPro()
        // this.initPro1()
        // this.initStatus()
    },
    methods: {
        // initStatus() {
        //     this.loading = true
        //     this.$axios({
        //         url: `${process.env.VUE_APP_SOURSE_MANAGE_HOST}/api/v1/employee/matter/type`,
        //         method: "get",
        //         headers: getHeaderName()
        //     }).then(res => {
        //         this.status_list = res.data.data
        //     })
        // },
        initPro() {
            this.loading = true
            this.$axios({
                url: `${process.env.VUE_APP_SOURSE_MANAGE_HOST}/api/v1/employee/${this.employee_id}/project/demand`,
                method: "get",
                params: {
                    week_range: this.weekCol.join()
                },
                headers: getHeaderName()
            }).then(res => {
                this.project_list[0].options = res.data.data.distribution
                this.project_list[1].options = res.data.data.unallocated
            })
        },
        // initPro1() {
        //     this.loading = true
        //     this.$axios({
        //         url: `${process.env.VUE_APP_SOURSE_MANAGE_HOST}/api/v1/employee/${this.employee_id}/update/demand`,
        //         method: "get",
        //         params: {
        //             week_range: this.weekCol.join()
        //         },
        //         headers: getHeaderName()
        //     }).then(res => {
        //         this.project_list1 = res.data.data
        //     })
        // },
        submitManPower() {
            if(!this.addProject) {
                this.$message.error('请选择项目')
                return false
            }
            if(!this.addSpend) {
                this.$message.error('请填写分配人周')
                return false
            }
            let data = {
                    'employee_id': this.employee_id, 
                    'project_id': this.addProject, 
                    'spend': this.addSpend
                }
                
            this.$emit('submitManPower',data)
        },
        // submitManPower1() {
        //     if(!this.editProject) {
        //         this.$message.error('请选择项目')
        //         return false
        //     }
        //     if(!this.editSpend) {
        //         this.$message.error('请填写分配人周')
        //         return false
        //     }
        //     let data = {
        //             'employee_id': this.employee_id, 
        //             'project_id': this.editProject, 
        //             'spend': this.editSpend
        //         }
                
        //     this.$emit('submitManPower1',data)
        // },
        submitStatus() {
            if(this.memStatus === '') {
                this.$message.error('请选择事项')
                return false
            }
            let data = {
                    'employee_id': this.employee_id, 
                    'type': this.memStatus
                }
                
            this.$emit('submitStatus',data)
        }

    },
    watch: {

    }
}
</script>
<style lang="scss" scoped>
.col-box {
  display: flex;
  margin-bottom: 10px;
  .col-span {
    min-width: 100px;
    line-height: 36px;
  }
}
.form-box {
    padding: 0 20px 20px 20px;
}
.form-title {
    font-size: 18px;
    margin: 10px 0 30px 0;
}
.form-item {
    display: flex;
    min-height: 50px;
}
.form-btn {
    text-align: right;
}
</style>


